<template>
  <div class="box">
    <div class="header">
      <span class="adress">西安</span>
      <div class="search">
        <i class="iconfont icon-Google"></i>&nbsp;|&nbsp;
        <i class="iconfont icon-fangdajing"></i>&nbsp;
        <p>请输入搜索关键字</p>
      </div>
      <span class="login" @click="toLogin" v-if="isToken">登录</span>
      <span class="login" v-else >欢迎</span>
    </div>
    <div class="main" @scroll="scrollMe" ref="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.imgurl" />
          </van-swipe-item>
        </van-swipe>
        <div class="top10">
          <van-grid :column-num="5" :border="false" :icon-size="40">
            <van-grid-item
              v-for="item in navList"
              :key="item.navid"
              :icon="item.imgurl"
              :text="item.title"
            />
          </van-grid>
        </div>
        <div class="top10 skbox">
          <div class="sktop">
            <div>
              <p>嗨购秒杀 <span>14点场</span></p>
              <van-count-down :time="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
            <span>
              爆款轮番秒
              <i><van-icon name="arrow" /></i>
            </span>
          </div>
          <ul class="seckill">
            <li
              v-for="(item, index) in seckillList"
              :key="index"
              @click="jumpTo(item.proid)"
            >
              <van-image width="60" height="60" :src="item.img1" />
              <p class="active">￥{{ item.originprice }}</p>
            </li>
          </ul>
        </div>
        <div class="top10">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul :class="isShow ? 'proList2' : 'proList1'">
              <li
                class="van-hairline--bottom van-hairline--right"
                v-for="item in proList"
                :key="item.proid"
                @click="jumpTo(item.proid)"
              >
                <img width="100%" :src="item.img1" alt="" />
                <div>
                  <h4>{{ item.proname }}</h4>
                  <p>￥{{ item.originprice.toFixed(2) }}</p>
                  <span>销量{{item.sales}}</span>
                </div>
                <b>看相似</b>
              </li>
              <div class="toggle" @click="isShow = !isShow">
                <van-icon name="bars" v-if="isShow" />
                <van-icon name="apps-o" v-else />
              </div>
            </ul>
          </van-list>
        </div>
      </van-pull-refresh>
      <div class="top" v-if="scrollTop > 700" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>

<script>
import {getBannerList,getNavList,getSeckillList,getProList,} from "../api/home";
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Lazyload,
  CountDown,
  Image as VanImage,
  Icon,
  List,
  PullRefresh,
} from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Lazyload);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);
export default {
  name: "Home",
  components: {},
  data() {
    return {
      navList: [],
      bannerList: [],
      time: 24 * 60 * 60 * 1000,
      seckillList: [],
      isShow: true,
      proList: [],
      loading: false,
      finished: false,
      count: 2,
      isLoading: false,
      scrollTop: 0,
      timer: null,
      sales:"",
      token:localStorage.getItem("token")||""
    };
  },
  methods: {
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        getProList({ count: this.count, limitNum: 12 }).then((res) => {
          console.log(res.data.data);
          this.loading = false;
          this.sales = res.data.data.sales
          if (res.data.data.length == 0) {
            this.finished = true;
          } else {
            this.proList = [...this.proList, ...res.data.data]; //this.proList=原有的数据加新加载的数据
            this.count++;
          }
        });
      }, 1000);
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
      // this.$router.push({path:"/detail/",params:{proid}})
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        getProList().then((data) => {
          (this.proList = data.data.data), (this.count = 2);
        });
      }, 1000);
    },
    scrollMe() {
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTop() {
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
    toLogin(){
      this.$router.push("/login")
    }
  },
  computed: {
    isToken(){
      if(this.token.trim()==""){
        return true
      }else{
        return false
      }
    }
  },
  created() {
    //请求的moke数据 的轮播图数据
    getBannerList().then((res) => {
      this.bannerList = res.data;
    });

    //mock数据的增删改查
    // //获取数据
    // myAxios.get("/bannerList").then((res) => {
    //   this.bannerList = res.data;
    // });
    // //添加数据
    // myAxios.post("/bannerList",{id:5,imgurl:"http://www.baidu.com"}).then(()=>{
    //   console.log("添加数据成功");
    // })
    // //修改数据 方式一：找到局部改变的数据进行更改
    // myAxios.patch("/bannerList/1",{imgurl:"img/1.jpg"}).then(()=>{
    //   console.log("修改数据成功");
    // })
    // //修改数据 方式二：覆盖式的更改
    // myAxios.put("/bannerList/1",{imgurl:"img/3.jpg"}).then(()=>{
    //   console.log("修改数据成功");
    // })
    // //删除
    // myAxios.delete("/bannerList/5").then(()=>{
    //   console.log("删除数据成功");
    // })

    getNavList().then((res) => {
      this.navList = res.data;
    });
    getSeckillList().then((res) => {
      this.seckillList = res.data.data;
      console.log(res.data.data);
    });
  },
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: 0.14rem;
}
.header .search {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 66%;
  height: 70%;
  background: #fff;
  border-radius: 0.4rem;
  color: #999;
}
.header .search p {
  font-size: 0.14rem;
}
.header .search i:nth-child(1) {
  color: rgb(255, 109, 109);
  font-weight: 900;
}
.my-swipe {
  height: 1.8rem;
}
.my-swipe img {
  height: 100%;
  width: 100%;
}
.top10 {
  margin-top: 0.1rem;
  background: #fff;
  min-height: 0.2rem;
}
.skbox {
  margin: 0.1rem 0.1rem;
  border-radius: 0.08rem;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 0.03rem;
}
.sktop {
  height: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #444;
  font-size: 0.14rem;
  padding: 0 0.04rem;
}
.sktop div {
  display: flex;
}
.sktop div p span {
  color: #ee0a24;
  font-size: 0.12rem;
  margin-right: 0.06rem;
}
.sktop > span {
  color: #ee0a24;
  font-size: 0.12rem;
}
.sktop span i {
  display: inline-block;
  width: 0.14rem;
  height: 0.14rem;
  background: #ee0a24;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  text-align: center;
  line-height: 0.16rem;
  font-size: 0.1rem;
}
.seckill {
  display: flex;
  overflow-x: scroll;
}
.seckill::-webkit-scrollbar {
  display: none;
}
.seckill li {
  flex: 0;
  margin: 0.05rem 0.05rem;
}
.active {
  color: rgb(201, 22, 35);
  font-size: 0.12rem;
  text-align: center;
}
.proList1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.proList1 li {
  width: 44%;
  height: 2.4rem;
  margin: 0.1rem 0.1rem;
  position: relative;
}
.proList1 li img {
  width: 80%;
  height: 50%;
  margin: 0.2rem;
  border-radius: 0.06rem;
}
.proList1 li h4 {
  width: 100%;
  font-size: 0.14rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.proList1 li p {
  color: rgb(201, 22, 35);
  bottom: 0.1rem;
}
.proList1 li span{
  color: #999;
  font-size: .14rem;
}
.proList1 li b{
  font-size: .10rem;
  position: absolute;
  right: .1rem;
  bottom: .01rem;
  background: rgb(225, 225, 225);
  width: .5rem;
  height: .2rem;
  border-radius: .1rem;
  text-align: center;
  line-height: .2rem;
}
.proList2 li {
  display: flex;
  height: 1rem;
  padding: 0.1rem 0.1rem;
}
.proList2 li img {
  width: 30%;
  height: 90%;
  margin: 0.1rem;
  border-radius: 0.06rem;
}
.proList2 li div {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction:column ;
  justify-content: space-around;
}
.proList2 li h4 {
  width: 100%;
  font-size: 0.14rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.proList2 li p {
  color: rgb(201, 22, 35);
}
.proList2 li div span{
  color: #999;
  font-size: .14rem;
}
.proList2 li b{
  font-size: .10rem;
  position: absolute;
  right: .1rem;
  bottom: .02rem;
  background: rgb(225, 225, 225);
  width: .5rem;
  height: .2rem;
  border-radius: .1rem;
  text-align: center;
  line-height: .2rem;
}
.toggle {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
  background: rgb(201, 22, 35);
  font-size: 0.18rem;
  color: #fff;
}
.top {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
  background: rgb(201, 22, 35);
  font-size: 0.18rem;
  color: #fff;
}
</style>